<template>
    <div>
        <!-- 公用头部 -->
        <div class="layout-head">
            <img src="@/assets/img/layout/layout-menu-botton.png" alt="" @click="onOpenMenuFn">
            <span>{{title}}</span>
        </div>
        <router-view/>
        <!-- 菜单导航 -->
        <transition name="fade">
        <div class="layout-menu-model" v-show="menu_show">
            <div class="layout-menu-box">
                <div class="close-box">
                    <img src="@/assets/img/layout/layout-close.png" alt="" @click="onClose">
                </div>
                <div class="menu-list border flex flex-align-center" v-for="(item,index) in menuData" :key="index" @click="onChange(index,item.url)">
                    <span class="flex-1" :class="{active:index == menu_index}">{{item.name}}</span>
                    <img v-if="menu_index == index" src="@/assets/img/layout/layout-left-arr.png" alt="">
                </div>
            </div>
        </div>
        </transition>
    </div>
</template>
<script>
export default {
    data () {
        return {
            menuData:'',
            menu_show:false,
        }
    },
    created () {
        let title = "重庆健康养生服务协会 ";
        document.getElementById('title').innerText = title;
        this.apiNavigation();
    },
    computed: {
        title(){
            return this.$store.getters.getTitle;
        },
        menu_index(){
            return this.$store.getters.getIndex;
        }
    },
    methods: {
        // 获取导航
        async apiNavigation(){
            let {data} = await this.https.get(this.api.apiNavigation);
            this.menuData = data;
        },

        // 菜单切换
        onChange(index,url){
            this.$store.commit('setIndex',index);
            if(url == '/dynamic')
               this.$store.commit('setMenu',0);
            else
                this.$store.commit('setMenu',url);
            this.$router.push(url)
            this.menu_show = false;
        },

        // 关闭菜单
        onClose(){
            this.menu_show = false;
        },

        // 打开菜单box
        onOpenMenuFn(){
            this.menu_show = true;
        }
    }
}
</script>
<style lang="less" scoped>
@import url(../../assets/css/common/layout.less);
</style>


